<template>
   <div class="personal">
     <van-nav-bar>
      <template #title>
        <span class="title-bar">个人中心</span>
      </template>
     </van-nav-bar>
    <section class="user-info">
      <van-cell-group>
        <van-cell title="头像" is-link  center size='large'  class="user-photo" >
          <template #default>
            <div>
              <van-image  round  class="picture" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
            </div>
          </template>
        </van-cell>
        <van-cell title="昵称" is-link  center size='large' value="詹浩"   @click="editName" />
        <van-cell title="账户" is-link  center size='large' value="zhanhao" />
        <van-cell title="邮箱" is-link  center size='large' value="310896024@qq.com" />
        <van-cell title="修改密码" is-link  center size='large'  />
      </van-cell-group>
      <div class="esc-login">
        <van-button type="info" class="esc-btn" round  @click="escLogin">退出登录</van-button>
      </div>
      <div class="modal">
          <van-dialog
            v-model="editNameDialog" 
            title="修改昵称" 
            show-cancel-button 
            @confirm="Changenickname" 
            @cancel="editNameDialog = false"
            confirm-button-color='#1989fa'
          >
           <div>
             <van-field  autofocus  v-model="username"  placeholder="请输入用户名" />
           </div>
          </van-dialog>
      </div>
    </section>
   </div>
</template>

<script>
import { Toast  } from 'vant';

import { reactive, toRefs } from "@vue/composition-api";

export default {
  setup(props,{root}){
      const state = reactive({
        editNameDialog:false,
        username:"詹浩"
      })

        //修改昵称
      const editName = ()=>{
        state.editNameDialog = true
      }

      const Changenickname =()=>{
        console.log('修改');
      }

      // 退出登录
      const escLogin =()=>{
        window.localStorage.removeItem('token');
        root.$store.commit('setToken','');
        Toast({
          type:"success",
          message:"退出成功",
          duration:1000
        })
        root.$router.push({name:"login"})
      }

      return{
        ...toRefs(state),
        editName,
        Changenickname,
        escLogin
      }
  }
}
</script>


<style lang="less" scoped>
  .personal{
    width: 100%;
    .user-info{
      width: 100%;
      margin-top: 1px;
      font-size: 30rem / 75;
      .user-photo{
        height: 180rem/75;
        .picture{
          width: 150rem/75;
          height: 150rem/75;
          margin-right: 10rem/75;
        }
      }
      .esc-login{
        display: flex;
        justify-content: center;
        margin-top: 200rem/75;
        .esc-btn{
          width: 9rem;
        }
      }
    }

  }
</style>